<template>
    <div class="recruitment-container">
        <!--筛选条件容器 这边也可以拆成一个组件-->
        <div class="filter-search-container">
            <!--<h2>搜索信息栏</h2>-->
            <div class="searchInfo-common">
                <span class="search-condition">地标地段:</span>
                <span @click="addressNotLimit()">
                        <el-tag size="small">
                           不限
                        </el-tag>
                </span>

                <span @click="addressClick(addrItem)" class="common-search-info" v-for="addrItem in loadingAddressOption">
                    <a href="#">{{addrItem.label}}</a>
                </span>
            </div>

            <div class="searchInfo-common">
                <span class="search-condition">职位分类:</span>
                <span @click="workJobNotLimit()">
                    <el-tag size="small" >不限</el-tag>
                </span>
                <span @click="industoryClick(industoryItem)" class="common-search-info" v-for="industoryItem in loadingIndustoryOption">
                    <a href="#">{{industoryItem.label}}</a>
                </span>
            </div>

            <div class="searchInfo-common">
                <span class="search-condition">职位薪资:</span>
                <span @click="salaryNotLimit()">
                    <el-tag size="small" >不限</el-tag>
                </span>
                <span @click="salaryClick(salaryItem)" class="common-search-info" v-for="salaryItem in salaryOption">
                    <a href="#">
                        {{salaryItem.startSalary}}
                            <span v-if="salaryItem.startSalary!=null && salaryItem.endSalary!=null">-</span>
                        {{salaryItem.endSalary}}
                        <span v-if="salaryItem.startSalary==null && salaryItem.endSalary!=null">以下</span>
                        <span v-else-if="salaryItem.startSalary!=null && salaryItem.endSalary ==null">以上</span>
                        <span v-else>元</span>
                    </a>
                </span>
            </div>

<!--            <div class="searchInfo-common">-->
<!--                <span class="search-condition">职位亮点:</span>-->
<!--                <span>-->
<!--                    <el-tag size="small" >不限</el-tag>-->
<!--                </span>-->
<!--                <span class="common-search-info" v-for="walfareItem in walfareOption">-->
<!--                    <a href="#">{{walfareItem.label}}</a>-->
<!--                </span>-->
<!--            </div>-->

            <div class="searchInfo-common">
                <span class="search-condition">更多筛选:</span>
                    <span class="more-filter">
                        <el-cascader
                            placeholder="请选择地区"
                            clearable
                            size="small"
                            v-model="companyAddressOptionsValue"
                            :options="companyAddressOptions"
                            @change="handleChangeAddress">
                        </el-cascader>
                    </span>

                    <span class="more-filter">
                        <el-cascader
                                placeholder="请选择行业"
                                clearable
                                size="small"
                                v-model="industryOptionsValue"
                                :options="industryOptions"
                                @change="handleChangeIndustory">
                        </el-cascader>
                    </span>
            </div>
        </div>

        <div>
            <!--<span>{{typeId}}</span>-->
            <!--显示公司发布的职位-->
            <recruimentCompany   :queryCondition="queryCondition"  v-if="typeId == '1'"></recruimentCompany>
<!--            <recruimentCompany   ref="queryCondition"    v-if="typeId == '1'"></recruimentCompany>-->
            <!--显示猎头发布的职位-->
            <recruimentHeadhunting  :queryCondition="queryCondition" v-else-if="typeId == '0'"></recruimentHeadhunting>
<!--            <recruimentHeadhunting ref="queryCondition" v-else-if="typeId == '0'"></recruimentHeadhunting>-->
<!--            <router-view v-if="isRouterAlive"></router-view>-->
        </div>
    </div>
</template>

<script>
    import commonApi from "@/api/commonApi";
    import workjobApi from "@/api/workjobs/workjobApi";
    import recruimentCompany from "@/components/views/recruitment/recruiment-company"
    import recruimentHeadhunting from "@/components/views/recruitment/recruiment-headhunting"

    export default {
        name: "recruitment-content",
        provide(){
          return{
              recruitmentReload:this.recruitmentReload
          }
        },
        // mounted: function () {
        //     console.log(" this.$refs.msg  ===>>", this.$refs.msg);
        //     this.$refs.msg.getConditionObj(this.queryCondition)
        // },


        computed:{
          typeId(){
              return  this.$route.params.typeId
          }
        },
        components:{
            recruimentCompany,
            recruimentHeadhunting
        },
        created() {
        },
        data() {
            return {
                queryCondition:{
                    workJobWalfare:undefined,               //职位福利

                    provincesId:undefined,                  //省份Id
                    cityesId:undefined,                     //城市Id
                    areasId:undefined,                      //地区Id

                    startSalary:undefined,                  //薪资起始
                    endSalary:undefined,                    //薪资结束

                    tradeId:undefined,                      //tradeId
                    classifyId:undefined,                   //classifyId
                    jobTypeId:undefined,                    //areasId
                },

                industryOptions:[],
                industryOptionsValue:[],

                companyAddressOptions:[],
                companyAddressOptionsValue:[],        //级联查询条件



                isRouterAlive:true,

                educationOption:[],
                loadingIndustoryOption:[],              //这个是负责加载行业的分类列表的
                loadingAddressOption:[],                //这个是负责加载省份信息
                salaryOption:[
                    {
                        //startSalary:1000,
                        endSalary:1000,
                    },
                    {
                        startSalary:1000,
                        endSalary:3000,
                    },
                    {
                        startSalary:3000,
                        endSalary:6000,
                    },
                    {
                        startSalary:6000,
                        endSalary:9000,
                    },
                    {
                        startSalary:9000,
                        endSalary:12000,
                    },
                    {
                        startSalary:12000,
                    },
                ],
                walfareOption:[],
            }
        },
        mounted() {
            this.loadingIndustory()
            this.loadingProvice()
            this.loadingWalfare()
            this.loadingEducation()
        },
        methods:{
            /*不限地址*/
            addressNotLimit(){
                this.queryCondition.provincesId = undefined
                this.queryCondition.cityesId = undefined
                this.queryCondition.areasId = undefined
            },
            /*不限行业*/
            workJobNotLimit(){
                this.queryCondition.tradeId = undefined
                this.queryCondition.classifyId = undefined
                this.queryCondition.jobTypeId = undefined
            },
            /*不限薪资*/
            salaryNotLimit(){
                this.queryCondition.startSalary = undefined
                this.queryCondition.endSalary = undefined
            },

            industoryClick(object){
                this.queryCondition.tradeId = object.value
            },
            addressClick(object){
                //console.log("address object ==> ",object)
                this.queryCondition.provincesId = object.value
            },
            salaryClick(object){
                this.queryCondition.startSalary = object.startSalary
                this.queryCondition.endSalary = object.endSalary
                // console.log("object === >>> ",object)
                // console.log("this .log ===>>",this.queryCondition)
            },
            /*加载出来行业信息*/
           loadingIndustory(){
             commonApi.loadingIndustory()
               .then(data => {
                   if (data.data.code === 0){
                       this.loadingIndustoryOption = data.data.data
                       this.industryOptions = data.data.data
                   }
               })
               .catch(err => {
                   Promise.reject(err)
               })
           },
            /*加载省份信息*/
            loadingProvice(){
                commonApi.loadingCompanyAddress()
                .then(data =>{
                    if (data.data.code === 0){
                        this.loadingAddressOption = data.data.data
                        this.companyAddressOptions = data.data.data
                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },
            /*加载福利信息*/
            loadingWalfare(){
              commonApi.loadingWelfare()
              .then(data =>{
                  this.walfareOption = data.data.data
              })
              .catch(err => {
                  Promise.reject(err)
              })
            },
            /*加载学历信息*/
            loadingEducation(){
                commonApi.loadingEducation()
                .then(data => {
                    this.educationOption = data.data.data
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },


            /*局部提供刷新*/
            recruitmentReload(){
              this.isRouterAlive = false
              this.$nextTick(function(){
                this.isRouterAlive=true
              })
            },


            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleChangeAddress(value){
                console.log("地址的value ===》",value)
                this.queryCondition.provincesId = value[0]
                this.queryCondition.cityesId = value[1]
                this.queryCondition.areasId = value[2]
            },
            handleChangeIndustory(value){
                console.log("行业的value ===》",value)
                this.queryCondition.tradeId = value[0]
                this.queryCondition.classifyId = value[1]
                this.queryCondition.jobTypeId = value[2]
            },
            handleSizeChange(){

            },
            handleCurrentChange(){

            }
        }
    }
</script>

<style scoped>
    /*全局a标签的样式*/
    a{
        color: #999999;
    }



    /*招聘页面,布局容器*/
    .recruitment-container{
        width: 100%;
        /*height: 300px;*/
        /*background-color: #Bfa;*/
        border: 1px solid transparent;
    }
    /*搜索容器*/
    .filter-search-container{
        width: 1300px;
        height: 260px;
        margin: 0 auto;
        margin-top: 10px;
        padding: 10px 30px 10px 30px;
        background-color: #FFF;
    }
    /*职位信息表*/
    .recruitment-info-container{
        position: relative;
        width: 1360px;
        margin: 0 auto;
        background-color: #F6F6F6;
    }
    /*搜索框*/
    .searchInfo-common{
        margin-top: 20px;
        font-size: 14px;
        color: #999999;
    }
    .searchInfo-common span{
        /*background-color: indianred;*/
        display: inline-block;
    }
    /*搜索条*/
    .search-condition{
        width: 60px;
        height: 24px;
        line-height: 24px;
        margin-right: 40px;
        margin-left: 20px;
    }
    /*职位信息*/
    .common-search-info{
        padding-left: 5px;
        padding-right: 5px;
        font-size: 13px;
        height: 24px;
        line-height: 24px;
        margin-left: 5px;
        text-align: center;
    }
    .common-search-info:hover{
        background: #F3F3F3;
        /*background: #Bfa;*/
    }
    /*更多的筛选*/
    .searchInfo-common .more-filter{
        display: inline-block;
        margin-left: 10px;
    }
    /*职位导航容器*/
    .job-nav-container{
        width: 1360px;
        background-color: #ffffff;
        margin: 0 auto;
        margin-top: 10px;
    }
    /*左侧招聘信息栏目*/
    .recruitment-left-div{
        width: 70%;
        height: 800px;
        border: 1px solid transparent;
        background-color: #ffffff;
        margin-top: 10px;
    }
    .recruitment-left-div ul  li{
        position: relative;
        padding-left:0 ;
        list-style: none;
        width: 100%;
        height: 130px;
        /*background-color: #99a9bf;*/
        margin-top: 1px;
        margin-left: -20px;
        border:1px solid #F8F8F8;
    }
    /*公司信息 使用了定位*/
    .company_position{
        position: absolute;
        top: 18px;
        left: 400px;
        font-size: 13px;
    }
    /*天数 使用了定位*/
    .daytime_position{
        position: absolute;
        top: 18px;
        left: 850px;
        font-size: 13px;
    }
    /*职位申请按钮，使用了定位*/
    .apply_btn_position{
        position: absolute;
        top: 50px;
        left: 790px;
    }
    .scale_position{
        position: absolute;
        top: 66px;
        left: 400px;
        font-size: 13px;
        color: #999999;
    }
    /*底部分页条目样式*/
    .page-cut{
        width: 100%;
        height: 90px;
        line-height: 90px;
        text-align: center;
    }
    /*招聘信息右侧*/
    /*右侧边栏*/
    .recruitment-right-div{
        position: absolute;
        top: 0px;
        left: 966px;
        width: 29%;
        /*height: 300px;*/
        border: 1px solid black;
        background-color: #fff;

    }
    /*清除浮动*/
    .clearfix:before,
    .clearfix:after{
        content:"";
        display:table;
    }



    /*这个盒子里面的内容还没有想好些什么*/
    .recruitment-img-box{
        position: absolute;
        /*border: 1px solid red;*/
        width: 100%;
        height: 300px;
        background-color: #FF7011;
    }
    /*推荐职位容器的样式*/
    .recommend-job-info-box{
        position: absolute;
        top: 310px;
        width: 100%;
        height: 490px;
        background-color: #fff;
    }
    /*设置推荐职位的样式*/
    .recommend-position-title{
        width: 95%;
        height: 50px;
        line-height: 50px;
        padding-left: 5%;
        /*border-bottom:1px solid #C0C4CC ;*/
    }

    .recommend-position-info-box{
        margin-top: 10px;
        width: 100%;
        height: 430px;
        /*background-color: #FF7011;*/
    }

    /**/
    .position-recommend-info{
        width: 100%;
        height: 100px;
        margin: 10px;
        border-bottom: 1px solid #eeeeee;
        /*background-color: antiquewhite;*/
    }
</style>
